<template>
  <div class="in-master-print" ref="print">
    <div class="print-mid">
      <div class="mid-l">
       <h3>{{title}}</h3>
       <h2>{{printData.workTypeTran}}</h2>
        <p><label>单据编码：</label>
          <span>{{printData.omCode}}</span>
        </p>
        <p><label>单据日期：</label>
          <span>{{printData.invoiceDate}}</span>
        </p>
        <p><label>单据状态：</label>
          <span>{{printData.invoiceStatus|getInvoice}}</span>
        </p>
        <p><label>审核日期：</label>
          <span>{{printData.checkDate}}</span>
        </p>
      </div>
      <div class="mid-m">
        <p>
          <label>发货仓库：</label>
          <span>{{printData.whCode}}</span>
        </p>
      <p><label>销售部门：</label>
        <span>{{printData.workDept}}</span>
      </p>
      <p>
        <label>销售员：</label>
        <span>{{printData.workStaff}}</span>
      </p>
      <p>
        <label>客户名称：</label>
        <span>{{printData.customer}}</span>
      </p>

    </div>
    <div class="mid-m">
      <p><label>进仓编号：</label>
        <span>{{printData.storageNo}}</span>
      </p>
      <p>
        <label>交付日期：</label>
        <span>{{printData.deliverDate}}</span>
      </p>
      <p><label>收货人：</label>
        <span>{{printData.contact}}</span>
      </p>
    </div>
    <div class="mid-m">
       <p>
         <label>电话：</label>
         <span>{{printData.mobile}}</span>
       </p>
       <p>
         <label>地址：</label>
         <span>{{printData.addr}}</span>
       </p>
       <p >
         <label>备注：</label>
         <span>{{printData.remarks}}</span>
       </p>
     </div>

      <div class="mid-r">
        <vue-qr  :logoScale="20" :text="qrCodeValue" :margin="0" :dotScale="1"></vue-qr>
      </div>
    </div>
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>物料编码</th>
          <th>物料名称</th>
          <th>主计量</th>
           <th>税率</th>
          <th>数量</th>
          <th>包装类型</th>
          <th>包装件数</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody v-if="printData.omDeliverSalveList.length>0">
        <tr v-for="(item,id) in printData.omDeliverSalveList" :key="id">
          <td  class="inv-id">{{item.id}}</td>
          <td class="inv-code">{{item.invCode}}</td>
          <td class="inv-name">{{item.invName}}{{item.invAttribute}}</td>
          <td class="inv-unit">{{item.unitName}}</td>
          <td class="inv-tax">{{item.tax}}%</td>
          <td class="inv-quantity">{{item.quantity}}</td>
           <td >{{item.pkgType}}</td>
            <td>{{item.piece}}{{item.pieceType}}</td>
          <td>{{item.remarks}}</td>
        </tr>
      </tbody>
    </table>
    <div class="print-bot">
      <div class="bot-l">
        <label>制单人：</label>
        <span>{{printData.userOper}}</span>
      </div>
      <div class="bot-m">
        <label>审核人：</label>
        <span>{{printData.userCheck}}</span>
      </div>
      <div class="bot-r">
        <label>打印日期：</label>
        <span>{{printData.printTime}}</span>
      </div>
    </div>
  </div>

</template>

<script>
    import vueQr from 'vue-qr'
  export default {
    data() {
      return {

      }
    },
    props: {
    // 打印数据
    printData: {
      type: Object,
      default () {
        return {}
      }
    },

    // 打印标题
    title: {
      type: String,
      default () {
        return ""
      }
    },

    // 二维码内容
     qrCodeValue:{
       type: String,
       default () {
         return ""
       }
     },
    },
    components: {
        vueQr
    },
    filters: {
     getInvoice(status) {
       switch (status) {
         case '0':
           return "开立"
           break;
         case '1':
           return "审核"
           break;
         case '2':
           return "退回"
           break;
         default:
           return "无"
       }
     }
    }
  }
</script>

<style lang="scss" scoped="scoped">

</style>
